<template>
  <div>
    <!-- 获取到数据展示的内容 -->
    <ul v-show="info.users.length">
      <li v-for="user in info.users" :key="user.login">
        <a :href="user.html_url">
          <img :src="user.avatar_url">
        </a>
        <h5>{{user.login}}</h5>
      </li>
    </ul>
    <!-- 还没开始获取数据展示的内容 -->
    <h1 v-show="info.isFirst">欢迎使用~</h1>
    <!-- 数据还没完全获取到展示的内容 -->
    <h1 v-show="info.isLoading">正在加载...</h1>
    <!-- 网络出错展示的内容 -->
    <h1>{{info.errorMsg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      info: {
        users: [],
        isFirst: true,
        isLoading: false,
        errorMsg: ''
      }
    }
  },
  methods: {
    getInfoData (info) {
      this.info = info
      console.log(this.info);
    }
  },
  mounted () {
    this.$bus.$on('getInfoData', this.getInfoData)
  },
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
ul {
  margin-top: 20px;
  width: 610px;
  height: 600px;
}
ul li {
  margin-bottom: 10px;
  float: left;
  width: 98px;
  height: 100px;
  list-style: none;
  border: 1px solid #ccc;
}
ul li a {
  width: 100px;
  height: 80px;
}
ul li h5 {
  margin: 0 auto;
  font-size: 8px;
}
ul li a img {
  width: 80%;
  padding: 0 10px;
}
</style>